<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>摇一摇抽奖</title>
    <link rel="stylesheet" type="text/css" href="/sbchoujiang/css/style.css">
    <link rel="stylesheet" type="text/css" href="/sbchoujiang/css/animate.min.css">
    <script type="text/javascript" src="/sbchoujiang/js/zepto.min.js"></script>{{--
    <script type="text/javascript" src="/sbchoujiang/js/red.js"></script>--}}
    <link rel="stylesheet" href="{{asset('statics/css/index20180307.css')}}" /> <style>
        @if($zhong==1)
        .gift_img{
            padding-top: 100%;
            background: url('{{asset('storage/'.$memberPrice->image)}}') no-repeat center;
            background-size: cover;
            border-radius: 50%;
        }
        @endif
    </style>
</head>
<body>
<!-- 红包音乐 -->
<audio id="shakemusic" src="music/red-01.mp3" style="display: none;"></audio>
<audio id="openmusic" src="music/red-02.mp3" style="display: none;"></audio>
<!-- End 红包音乐 -->
<!-- 红包 -->
<div class="red_bg">
    <div class="red-ts"></div>
    <div class="red-ss-bg">
        <span class="red-ss animated"></span>
    </div>
    <div class="red-jh">
       拿起手机摇一摇，即可抽奖
    </div>
    <div class="red-tc">
        <!-- 已中奖 -->
@if($zhong==1)
        <div class="mask_prize" style="display: block;">
            <div class="prize_box">
                <div class="gift">
                    <div class="gift_img"></div>
                </div>
                <h1>恭喜获得礼品一份</h1>
                <h3>景区服务中心扫码兑换</h3>
                <a href="{{route('user_prizes')}}" class="look_prize">
                    查看
                </a>
            </div>
        </div>
        @else

        <div class="mask_prize" style="display: block;">
            <div class="prize_box">
                <div class="gift">
                    <div class="gift_img"></div>
                </div>
                <h1>您没有中奖信息</h1>
                <h3>谢谢参与</h3>
                <a href="/user/combo" class="look_prize">
                    查看我的套餐
                </a>
            </div>
        </div>
    @endif
    </div>
    <!-- End 已中奖 -->
    <!-- 未中奖 -->
    <!-- <div class="red-yzj">
        <div class="red-tc-k">
            <img src="img/red-bw.png">
            哎呀！</br>您的优惠券被风刮走了啊
        </div>
        <div class="red-tc-btn">
            <button>再摇一次</button>
        </div>
    </div> -->
    <!-- End 未中奖 -->
    <!-- 机会用光了 -->
    <!-- <div class="red-yzj">
        <div class="red-tc-k">
            <img src="img/red-jh.png">
            机会用光了哦！</br>明天再来吧！
        </div>
        <div class="red-tc-btn">
            <button>返回主页</button>
        </div>
    </div> -->
    <!-- End 机会用光了 -->
</div>
</div>
<!-- End 红包 -->

</body>
<script>

var out_trade_no='{{$out_trade_no}}';
var is_ture=0;
    $(document).ready(function() {
        if (window.DeviceMotionEvent){
            var speed = 25;
            var audio = document.getElementById("shakemusic");
            var openAudio = document.getElementById("openmusic");
            var x = t = z = lastX = lastY = lastZ = 0;
            window.addEventListener('devicemotion',
                function () {
                    var acceleration = event.accelerationIncludingGravity;
                    x = acceleration.x;
                    y = acceleration.y;
                    if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed) {
                        audio.play();
                        $('.red-ss').addClass('wobble')
                        setTimeout(function(){
                            audio.pause();
                            openAudio.play();
                            if(is_ture==0) {
                                is_ture==1;
                                $.get('/is_choujiang', {out_trade_no: out_trade_no}, function (data) {

                                    if (data == 'success') {
                                        $('.red-tc').css('display', 'block');
                                    } else {
                                        alert('你已经抽过奖了');
                                    }
                                })
                            }
                        }, 1500);
                    };

                    lastX = x;
                    lastY = y;
                },false);
        };

    });
</script>
</html>